﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="library/css/reset.css" />
    <link type="text/css" rel="stylesheet" href="library/css/smoothness/jquery-ui-1.9.1.custom.css" />
    <link type="text/css" rel="stylesheet" href="library/css/style.css" />
    
    <script language="javascript" type="text/javascript" src="library/js/jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/jquery-ui-1.9.1.custom.js"></script>

    <script language="javascript" type="text/javascript" src="library/js/QlikViewMashups.js"></script>

    <script language="javascript" type="text/javascript">

        $(function() {

            if (IsOffline()) {

                loadJs(qvAjaxLib_Url, qvAjaxLoaded);

                function qvAjaxLoaded() {

                    Qv.InitWorkBench({
                        View: 'Sales Compass',
                        InitialSelections: ["LB5732,Commit,Omitted,BestCase"],
                        Host: null // Instead of using "Host: 'Local'", use "Host: null"
                    });

                }
            }
            else {
                $("#divOutput").empty();
                $("#divOutput").html("<img src='library/images/DivIntegration_02.png'>");
                $("#divOutput").css('cursor', 'pointer');
                $("#divOutput").click(function () {
                    OfflineMsg();
                });
            }

        });

    </script>
    <style type="text/css">
    .QvInlineObject 
    {
        position:relative;
        margin-left:10px;
        margin-right:10px;
        float:left;
    }
    html 
    {
        overflow:hidden;
        padding:10px 10px 10px 10px;
    }
    </style>
</head>
<body>

        <h2 class="hidden" id="demo_title">Two Objects Using Initial Selections</h2>
        <div id="demo_description" class="hidden">
            This example loads two objects from a single QlikView document with an initial selection in the listbox "Forecast Categories" (Id: LB5732).<br />
        </div>

        <div id="divOutput">
        <div class="QvInlineObject" avqview="Sales Compass" avq="object:.Document\LB5732"
            id="Document\LB5732" style="height: 100px; width: 150px;">
        </div>
        <div class="QvInlineObject" avqview="Sales Compass" avq="object:.Document\CH351"
            id="Document\CH351" style="width: 300px; height: 250px;">
        </div>
        </div>

        <div id="demo_code_header" class="hidden">
        <p>
            Javascript code placed in the header of the Html file to initialize the QlikView-object(s).
        </p>
            <pre class="wrapped">
            &lt;script language="javascript" type="text/javascript"&gt;<br />
                 &nbsp;&nbsp;&nbsp;Qv.InitWorkBench({<br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;View: 'Sales Compass',<br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="redBold">InitialSelections: ["LB5732,Commit,Omitted,BestCase"]</span>,<br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Instead of using "Host: 'Local'", use "Host: null"<br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Host: null <br />
                 &nbsp;&nbsp;&nbsp;});<br />
            &lt;/script&gt;<br />
            </pre>
        </div>

        <div id="demo_code_css" class="hidden">
        <pre class="wrapped">
        .QvInlineObject<br /> 
        {<br />
            &nbsp;&nbsp;&nbsp;position:relative;<br />
            &nbsp;&nbsp;&nbsp;margin-left:10px;<br />
            &nbsp;&nbsp;&nbsp;margin-right:10px;<br />
            &nbsp;&nbsp;&nbsp;float:left;<br />
        }<br />
        </pre>
        </div>

        <div id="demo_code_body" class="hidden">
        <p>
        DIV blocks to place the QlikView objects within your webpage.
        </p>
        <div>
            <pre class="wrapped">
            &lt;!-- Listbox with the Id LB5732 --&gt;<br />
            &lt;div class="QvInlineObject" avqview="Sales Compass" avq="object:.Document\LB5732"&gt;&lt;/div&gt;<br />
            <br />
            &lt;!-- Chart with the Id CH351 --&gt;<br />
            &lt;div class="QvInlineObject"  avqview="Sales Compass" avq="object:.Document\CH351"&gt;&lt;/div&gt;<br />
            </pre>
        </div>
        </div>

</body>
</html>
